<template>
    <van-form @submit="onSubmit" class="my-form">
        <h2>用户登陆</h2>
        <van-cell-group inset>
            <van-field v-model="mobile" name="mobile" label="电话" placeholder="请输入电话号码"
                :rules="[{ required: true, message: '请填写电话号码' }]" />
            <hr />
            <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <div style="margin: 20px;">
            <van-button round block type="primary" native-type="submit">
                点击登陆
            </van-button>
        </div>
    </van-form>
</template>
  
<script setup lang='ts'>
import { onUnmounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { userLogin } from "../api/api";
import $bus from "../config/eventBus";

$bus.emit("tabBarHide", false)
onUnmounted(() => {
    $bus.emit("tabBarHide", true)
})

const store = useStore();
const router = useRouter();
const route = useRoute();

const mobile = ref<string>('');
const password = ref<string>('');
const onSubmit = async (values: any) => {
    console.log('submit', values);
    let res = await userLogin(values)
    // 完成了登陆，我们需要保存登陆信息，保存登陆状态，跳转到 个人中心页面
    if (res && res.data._token) {
        store.commit("updateToken", res.data._token)
        if (route.query.refer) {
            router.push({
                path: route.query.refer as string
            })
        } else {
            router.push("/center")
        }

    } else {
        console.log("用户名或者密码输入错误！Toast显示信息也可！");
    }
};
</script>
  
<style scoped lang='scss'>
.my-form {
    margin: 36px;
    margin-top: 200px;

    h2 {
        text-align: center;
        font-size: 21px;
        color: #666;
        margin-bottom: 21px;
    }
}
</style>